<!doctype html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>color-insight</title>
    <style>
      html, body {
        overflow: hidden;
        margin: 0;
        padding: 0;
      }
      #app {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 1s;
        background: linear-gradient(to bottom, #fff, #333);
      }
      .item {
        width: 100vw;
        text-align: center;
      }
      .swiper {
        width: 500px;
        height: 750px;
      }
      .swiper-title {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        text-shadow: 0 0 1px #000;
        backdrop-filter: blur(6px);
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div>
        <div class="item">
          <div class="swiper">
            <!-- Additional required wrapper -->
            <div class="swiper-wrapper">
              <!-- Slides -->
              <div class="swiper-slide">
                <img src="https://ihtmlcss-npm.oss-cn-beijing.aliyuncs.com/%40ihtmlcss/color-insight/1.jpg" id="slide_1" alt="">
                <div class="swiper-title" id="slide_title_1">照片来自@Willian Justen de Vasconcellos</div>
              </div>
              <div class="swiper-slide">
                <img src="https://ihtmlcss-npm.oss-cn-beijing.aliyuncs.com/%40ihtmlcss/color-insight/2.jpg" id="slide_2" alt="">
                <div class="swiper-title"  id="slide_title_2">照片来自@Willian Justen de Vasconcellos</div>
              </div>
              <div class="swiper-slide">
                <img src="https://ihtmlcss-npm.oss-cn-beijing.aliyuncs.com/%40ihtmlcss/color-insight/3.jpg" id="slide_3" alt="">
                <div class="swiper-title"  id="slide_title_3">照片来自@Willian Justen de Vasconcellos</div>
              </div>
              <div class="swiper-slide">
                <img src="https://ihtmlcss-npm.oss-cn-beijing.aliyuncs.com/%40ihtmlcss/color-insight/4.jpg" id="slide_4" alt="">
                <div class="swiper-title"  id="slide_title_4">照片来自@Willian Justen de Vasconcellos</div>
              </div>
              <div class="swiper-slide">
                <img src="https://ihtmlcss-npm.oss-cn-beijing.aliyuncs.com/%40ihtmlcss/color-insight/5.jpg" id="slide_5" alt="">
                <div class="swiper-title"  id="slide_title_5">照片来自@Willian Justen de Vasconcellos</div>
              </div>
              <div class="swiper-slide">
                <img src="https://ihtmlcss-npm.oss-cn-beijing.aliyuncs.com/%40ihtmlcss/color-insight/6.jpg" id="slide_6" alt="">
                <div class="swiper-title"  id="slide_title_6">照片来自@Willian Justen de Vasconcellos</div>
              </div>
              <div class="swiper-slide">
                <img src="https://ihtmlcss-npm.oss-cn-beijing.aliyuncs.com/%40ihtmlcss/color-insight/7.jpg" id="slide_7" alt="">
                <div class="swiper-title"  id="slide_title_7">照片来自@Willian Justen de Vasconcellos</div>
              </div>
            </div>
            <!-- If we need pagination -->
            <div class="swiper-pagination"></div>

            <!-- If we need navigation buttons -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

          </div>
        </div>
      </div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
